<template>
    <div class="loanApplyMng applyList">
    <rui-page :defines="defines" :has-card-box="false" class="loanApply">
        <!-- 查询条件 -->
        <rui-query :label-width="120"
                   ref="mortgageForm"
                   isApplyQuery
                   :query="queryData"
                   :query-rows="searchFormOptions">
            <template slot="key" slot-scope="{ key,item,data }">
                <Input prefix="ios-search" v-model="data[key]" @keyup.enter.native="queryFormData"
                       placeholder="客户姓名、申请编号"/>
            </template>
        </rui-query>
        <div class="table-card">
            <div class="btn-status flex flex-between">
                <div class="loanApplyBtn">
                    <span style="color: #222222;font-weight: bold;font-size:14px;">业务类型:</span>&nbsp;&nbsp;
                    <Button @click="normalQuery()" :class="isAfterQuery === 1 ? 'activeBtn btn' :'btn'" size="default">正常</Button>
                    <Button @click="afterQuery()" :class="isAfterQuery === 2 ? 'activeBtn btn' :'btn'" size="default">资产修正</Button>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color: #222222;font-weight: bold;font-size:14px;">解抵押状态:</span>&nbsp;&nbsp;
                    <Button v-for="(item,index) in borderStatus" :key="index" @click.native="selectStatus(item.code)" :class="status === item.code ? 'activeBtn btn' :'btn'" size="default">{{item.name}}</Button>
                </div>
            </div>
            <rui-table
                :defineId="'mortgageFilingDefines'"
                :fixed-right="['action']"
                :showIndex="false"
                :select="false"
                :columns="mortgageColumns"
                :slots="[{key:'action',slot:'action'},{key:'camainNo',slot:'camainNo'}]"
                :fixedLeft="['camainNo']"
                @loadDatas="queryData"
                ref-query="mortgageForm"
                ref="mortgageTable"
                :border="false"
            >
                <template slot="action" slot-scope="{ row }">
                    <div class="btn-no-border">
                    <Button ghost type="primary" icon="" @click.native="goToDo(row,'edit')" :disabled="!(row.statusMortg==2||row.statusMortg==5)">点击办理</Button>
                    </div>
                </template>
                <template slot-scope="{ row,  index, }" slot="camainNo">
                    <a style="color:#3086eb;cursor: pointer;" @click.prevent="goToDo(row,'view')">
                        {{row.camainNo}}
                    </a>
                </template>
            </rui-table>
        </div>
    </rui-page>
    </div>
</template>

<script>
    import mortgageFilingDefines from "../../api/mortgage-filing/mortgageFilingDefines";
    import {getAfterMortgageList, getMortgageList, matching} from "../../api/mortgage-filing/mortgageFilingApi";

    export default {
        data() {
            return {
                isAfterQuery:1,//默认正常
                status:0,//默认全部
                borderStatus:[
                    {code: 0,name:"全部"},
                    {code: 1,name:"待解抵押"},
                    {code: 2,name:"邮寄待解抵押"},
                    {code: 3,name:"已解抵押"},
                    {code: 5,name:"超期解抵押"},
                ],
                searchFormOptions: [
                    {
                        isGroup: false,
                        defineId: "mortgageFilingDefines",
                        fields: ["key"],
                        slots: [{key: 'key', slotName: 'key'}]
                    },
                ],
                //table表单显示字段
                mortgageColumns: ["action", "borrowerName", "camainNo", "categoryname", "areaname", "statusname", "statusmortgname", "closeDate"],
            };
        },
        methods: {
            //查询方法
            queryData(queryData) {
                queryData.status = this.status;
                //正常[1]||资产修正[2]
                if(1==this.isAfterQuery){
                    if(queryData.condition.key){
                        queryData.key = queryData.condition.key;
                        //存在key则是模糊查询
                        matching(queryData).then(res => {
                            if (res.code === "0000") {
                                let {records, total} = res.data;
                                this.$refs.mortgageTable.updateTableData(records, total);
                            }
                        });
                    }else{
                        //不存在key则是列表查询
                        getMortgageList(queryData).then(res => {
                            if (res.code === "0000") {
                                let {records, total} = res.data;
                                console.info(JSON.stringify(records))
                                this.$refs.mortgageTable.updateTableData(records, total);
                            }
                        });
                    }
                }else if(2==this.isAfterQuery){
                    if(queryData.condition.key){
                        queryData.key = queryData.condition.key;
                    }
                    getAfterMortgageList(queryData).then(res => {
                        if (res.code === "0000") {
                            let {records, total} = res.data;
                            this.$refs.mortgageTable.updateTableData(records, total);
                        }
                    });
                }
            },
            //资产修正
            afterQuery() {
                this.refresh(0,2);
            },
            //正常
            normalQuery() {
                this.refresh(0,1);
            },
            //点击办理
            goToDo(row,op) {
                console.info(JSON.stringify(row))
                this.afs.newTab(this, 'projects/afs-apply/pages/mortgage-filing/mortgageFilingApply', '解抵押申请', 'ios-add', {id: row.id,op:op}, 'aa', [], true);
            },
            //刷新
            refresh(status,isAfterQuery) {
                this.status = status;
                this.isAfterQuery = isAfterQuery;
                this.$refs['mortgageTable'].reloadData();
            },
            //选择解抵押状态
            selectStatus(status){
                this.refresh(status,this.isAfterQuery);
            },
        },
        //初始化
        mounted() {
            this.refresh(0,1);//默认全部+正常
        },
        computed: {
            defines() {
                return [{id: "mortgageFilingDefines", fields: mortgageFilingDefines}];
            }
        },
    }
</script>
<style scoped lang="less">
    .loanApplyMng {

        .uploadecn {
            padding-left: 150px;
        }

        .uploadecn > span {
            width: 150px;
            position: absolute;
            top: 0px;
            left: 0px;
            color: #333;
            text-align: right;
            padding-right: 12px;
        }

        /deep/ .ivu-table .demo-table-05-row td {
            background-color: #f5a623;
            color: #fff;
        }

        /deep/ .ivu-table .demo-table-error-row td {
            background-color: #ff6600;
            color: #fff;
        }

        .loanApplyBtn .ivu-btn:focus {
            color: #efab4d;
            background-color: white;
            border-color: #efab4d;
            box-shadow: none;
        }

    }

</style>
<style lang="less" scoped>
    @import "../../assets/css/applyList.less";
</style>
